<template>
	<view class="index container">
		<view>
			<uni-easyinput class="index_sreachInput" suffixIcon="search" v-model="searchValue" placeholder="十一黄金旅游季"
				@iconClick="searchClick">
			</uni-easyinput>
		</view>
		<view class="index_hot">
			<hot-tag></hot-tag>
		</view>
		<!-- 图片菜单 -->
		<view class="index_menu">
			<menu-icon :list="listWarpper.menuIcon"></menu-icon>
		</view>
		<view class="index_advertising">
			<advertising-swiper :list="listWarpper.swiperList"></advertising-swiper>
		</view>
		<view class="index_recommend">
			<recommend-tag></recommend-tag>
		</view>
		<view class="index_travel">
			<travel-card :travelList="listWarpper.travelList"></travel-card>
		</view>
	</view>
</template>

<script setup>
	import uma from 'umtrack-wx';
	import {
		ref,
		computed,
		onMounted,
		reactive
	} from "vue";
	import {
		onPullDownRefresh,
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import HotTag from './HotTag.vue'
	import MenuIcon from './MenuIcon.vue'
	import AdvertisingSwiper from './AdvertisingSwiper.vue'
	import RecommendTag from './RecommendTag.vue'
	import TravelCard from './TravelCard.vue'
	import {
		swiperList,
		menuIcon,
		products
	} from '../../api/user.js'
	import {
		useStore
	} from 'vuex' // 引入useStore 方法
	const store = useStore() // 该方法用于返回store 实例
	console.log(store) // store 实例对象

	let username = computed(() => {
		return store.state.user.userInfo.name
	})

	let searchValue = ref('')

	// 头部搜索框
	const searchClick = () => {
		console.log(1111)
	}
	const listWarpper = reactive({
		swiperList: [],
		menuIcon: [],
		travelList: []
	})
	// 轮播图
	const getSwiperList = () => {
		let data = {
			imageType: "indexSwiper",
			imageStatus: '1'
		}
		swiperList(data).then(res => {
			let {
				code,
				list
			} = res;
			if (code == 200) {
				listWarpper.swiperList = list
			}

		})
	}
	// 菜单图标
	const getMenuIcon = () => {
		let data = {
			imageType: "menuIcon",
			imageStatus: '1'
		}
		menuIcon(data).then(res => {
			let {
				code,
				list
			} = res;
			if (code == 200) {
				listWarpper.menuIcon = list
			}

		})
	}
	// 首页产品数据
	const getProductList = () => {
		let data = {
			productStatus: '0'
		}
		products(data).then(res => {
			let {
				code,
				list
			} = res;
			if (code == 200) {
				listWarpper.travelList = list
			}
		})
	}
	
	onPullDownRefresh(() => {
		getMenuIcon()
		getSwiperList()
		getProductList()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	})
	onShow(()=>{
		uma.trackEvent('Um_Event_BottomNaviClick', {
			Um_Key_ButtonName: '首页',
			Um_Key_UserID: store.state.user.userInfo.id,
			Um_Key_UserLevel: '1'
		});
		getMenuIcon()
		getSwiperList()
		getProductList()
	})
</script>

<style lang="scss">
	.container {
		padding: 20upx;
		font-size: 14px;
		line-height: 24px;
	}

	.index {
		&_hot {
			padding-top: 10upx;
		}

		&_menu {
			padding-top: 16upx;
		}

		&_advertising {
			margin-top: 20upx;
		}

		&_recommend {
			padding-top: 20upx;
		}

		&_travel {
			padding-top: 20upx;
		}
	}
</style>
